@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.dropdown {
  position: relative;
}

.list {
  composes: list-reset from "../../Sass/common/_base.scss";

  @include transform(scaleY(0));
  @include transition(transform $animation-fast cubic-bezier(0.19, 1, 0.22, 1));
  @include transform-origin(center, top);
  position: absolute;
  min-width: 100%;
  overflow: hidden;
  z-index: 9999;
  box-sizing: border-box;
  background: #fff;
  border-radius: $radius-small;
  border: 1px solid rgba($grey, 0.4);
  box-shadow: 0px 3px 15px rgba($dark, 0.15);
  &.is-open {
    transform: scaleY(1);
    overflow-y: auto;
  }
}

.btn--dropdown {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-primary from "../../Sass/common/_buttons.scss";
  composes: btn-transparent from "../../Sass/common/_buttons.scss";
  font-size: $font-size-mid-small;
  text-align: left;
  background: $text-light;
  color: $text-dark;
  border: 1px solid $field-border;
  position: relative;
  &:hover,
  &:focus {
    background: $text-light;
    color: $text-dark;
    border: 1px solid $color-primary;
  }
  svg {
    width: 30px;
    height: 30px;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 12px;
    fill: $dark-lighter;
  }
  &:disabled {
    background: $text-light !important;
    color: $text-dark;
    opacity: 0.3;
  }
}

.btn--option {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-transparent from "../../Sass/common/_buttons.scss";
  composes: btn--small from "../../Sass/common/_buttons.scss";

  width: 100%;
  color: $text-dark;

  &:hover,
  &:focus {
    color: $dropdown-hover-color;
  }

  &.is-selected {
    color: $color-primary;
  }
}

.myDataDropdown {
  text-align: left;
}
